<template>
  <div id="noIsVip" class="noIsVip">
    <div class="header">
      <p class="title"><span>开通VIP &nbsp;</span>查看完整数据</p>
      <p>不浪费分 上好大学</p>
    </div>
    <div class="button" @click="onClickOpenVIP">立即开通</div>
    <div class="line">
      <hr />
      <span>20+项功能超值使用</span>
      <hr />
    </div>
    <div class="icon">
      <div class="icon-footer">
        <img src="@/assets/images/VIP1.png" alt="" />
        AI智能填志愿
      </div>
      <div class="icon-footer">
        <img src="@/assets/images/VIP2.png" alt="" />
        分数线
      </div>
      <div class="icon-footer">
        <img src="@/assets/images/VIP3.png" alt="" />
        招生计划
      </div>
      <div class="icon-footer">
        <img src="@/assets/images/VIP4.png" alt="" />
        测录取概率
      </div>
      <div class="icon-footer">
        <img src="@/assets/images/VIP5.png" alt="" />
        新高考选科
      </div>
      <div class="icon-footer">
        <img src="@/assets/images/VIP6.png" alt="" />
        更多功能
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();

function onClickOpenVIP() {
  router.push({
    path: '/shopserve/shopDet',
    query: {
      id: store.getters.indexInfo.vipserviceid,
    },
  });
}
</script>

<style lang="scss" scoped>
.noIsVip {
  height: 500px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#f4f4f4),
    to(#fff)
  );

  .header {
    .title {
      font-size: 28px !important;

      span {
        color: var(--color-text);
      }
    }

    p {
      font-size: 20px;
      text-align: center;
      margin: 10px 0;
    }
  }

  .line {
    width: 360px;
    color: #999;
    margin: 0 auto 24px;
    line-height: 25px;

    hr {
      display: inline-block;
      width: 80px;
      margin-bottom: 4px;
    }

    span {
      margin: 0 20px;
      font-family:
        Microsoft YaHei,
        SimSun,
        Arial,
        sans-serif !important;
    }
  }

  .icon {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 590px;
    height: 70px;
    color: #666;
    font-weight: 400;
    text-align: center;
    font-size: 14px;

    .icon-footer {
      width: 16.66667%;

      img {
        width: 45px;
        border-radius: 50%;
        display: block;
        margin: 0 auto 5px;
      }
    }
  }

  .button {
    width: 275px;
    height: 50px;
    background: linear-gradient(136deg, #40c1ff, #4068ff);
    -webkit-box-shadow: 0 2px 4px 2px rgba(250, 149, 150, 0.3);
    box-shadow: 0 2px 4px 2px rgba(250, 149, 150, 0.3);
    border-radius: 25px;
    line-height: 50px;
    margin: 30px auto 50px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    animation: buttonAnimation 2s infinite;
    -webkit-animation: buttonAnimation 2s infinite;

    @keyframes buttonAnimation {
      0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }

      50% {
        -webkit-transform: scale(1);
        transform: scale(1);
      }

      to {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
      }
    }
  }
}
</style>
